<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—生命周期管理"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="设备名称" v-model="name" placeholder="请输入"></LInput>
      <LInput label="设备编码" v-model="no" placeholder="请输入" style="margin-left: 16px"></LInput>
      <img src="../../../assets/img/search_1.png" alt="" style="width: 40px" @click="repairDialog1 = true" />
      <LButton label="查询数据" style="margin-left: 30px"></LButton>
      <LButton label="设备详情" style="margin-left: 16px" @click="repairDialog = true"></LButton>
    </section>
    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="生命周期">
        <!-- <el-table :data="tableData1" style="width: 100%" border>
          <el-table-column prop="a" label="内容" />
          <el-table-column prop="b" label="编码" />
          <el-table-column prop="c" label="时间" />
          <el-table-column label="操作">
            <template #default>
            <el-button type="success" size="small">查看</el-button>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table> -->
        <div class="block-1" style="width: 300px; margin: 0 auto">
          <div class="block-1-1">
            <div style="background: rgba(203, 22, 22, 1)"></div>
            <div>维修</div>
          </div>
          <div class="block-1-1">
            <div style="background: rgba(106, 147, 237, 1)"></div>
            <div>巡检</div>
          </div>
          <div class="block-1-1">
            <div style="background: rgba(42, 201, 131, 1)"></div>
            <div>保养</div>
          </div>
          <div class="block-1-1">
            <div style="background: rgba(84, 201, 219, 1)"></div>
            <div>其他</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="周期数据">
        <el-table :data="tableData2" style="width: 100%" border>
          <el-table-column prop="a" label="内容" />
          <el-table-column prop="b" label="编码" />
          <el-table-column prop="c" label="时间" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 搜索栏 设备详情 弹出框 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="查看设备详情" width="40%" @close="repairDialogClose">
        <div class="dialog-border">
          <el-form label-width="120px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules" size="mini">
            <div class="row-1">
              <el-form-item label="设备编码" prop="a" style="width: 100%">
                <el-input v-model="repairForm.a" readonly></el-input>
              </el-form-item>
              <el-form-item label="设备名称" prop="b" style="width: 100%">
                <el-input v-model="repairForm.b" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="序列号" prop="c" style="width: 100%">
                <el-input v-model="repairForm.c" readonly></el-input>
              </el-form-item>
              <el-form-item label="出厂编号" prop="d" style="width: 100%">
                <el-input v-model="repairForm.d" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="区域" prop="e" style="width: 100%">
                <el-input v-model="repairForm.e" readonly></el-input>
              </el-form-item>
              <el-form-item label="部门" prop="f" style="width: 100%">
                <el-input v-model="repairForm.e" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="设备系统" prop="g" style="width: 100%">
                <el-input v-model="repairForm.e" readonly></el-input>
              </el-form-item>
              <el-form-item label="设备类别" prop="h" style="width: 100%">
                <el-input v-model="repairForm.e" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="产地" prop="i" style="width: 100%">
                <el-input v-model="repairForm.i" readonly></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="j" style="width: 100%">
                <el-input v-model="repairForm.j" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="安装位置" prop="k" style="width: 100%">
                <el-input v-model="repairForm.k" readonly></el-input>
              </el-form-item>
              <el-form-item label="品牌" prop="l" style="width: 100%">
                <el-input v-model="repairForm.l" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="规格型号" prop="m" style="width: 100%">
                <el-input v-model="repairForm.m" readonly></el-input>
              </el-form-item>
              <el-form-item label="供应商" prop="n" style="width: 100%">
                <el-input v-model="repairForm.n" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="生产商" prop="o" style="width: 100%">
                <el-input v-model="repairForm.o" readonly></el-input>
              </el-form-item>
              <el-form-item label="使用年限(年)" prop="p" style="width: 100%">
                <el-input v-model="repairForm.p" placeholder="数字" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="保修期(年)" prop="q" style="width: 100%">
                <el-input v-model="repairForm.q" placeholder="数字" readonly></el-input>
              </el-form-item>
              <el-form-item label="购置日期" prop="r" style="width:100%">
                <el-date-picker v-model="repairForm.r" type="date" readonly placeholder="格式：YYYY-MM-DD"></el-date-picker>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="安装日期" prop="s" style="width: 100%">
                <el-date-picker v-model="repairForm.s" type="date" readonly placeholder="格式：YYYY-MM-DD"></el-date-picker>
              </el-form-item>
              <el-form-item label="设备原值(元)" prop="t" style="width: 100%">
                <el-input v-model="repairForm.t" placeholder="数字" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="是否固资" prop="u" style="width: 100%">
                <div class="row-1-border">
                  <el-radio v-model="repairForm.b" label="1" size="mini">是</el-radio>
                  <el-radio v-model="repairForm.b" label="2" size="mini">否</el-radio>
                </div>
              </el-form-item>
              <el-form-item label="IP地址" prop="v" style="width: 100%">
                <el-input v-model="repairForm.v" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="购资价(元)" prop="w" style="width: 100%">
                <el-input v-model="repairForm.w" placeholder="数字" readonly></el-input>
              </el-form-item>
              <el-form-item label="分摊价(元)" prop="x" style="width: 100%">
                <el-input v-model="repairForm.x" placeholder="数字" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="折旧率(%)" prop="y" style="width: 100%">
                <el-input v-model="repairForm.y" placeholder="数字" readonly></el-input>
              </el-form-item>
              <el-form-item label="主维保方" prop="z" style="width: 100%">
                <el-input v-model="repairForm.z" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="维保执行方" prop="aa" style="width: 100%">
                <el-input v-model="repairForm.aa" readonly></el-input>
              </el-form-item>
              <el-form-item label="维保执行方地址" prop="ab" style="width: 100%">
                <el-input v-model="repairForm.ab" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="维保执行方姓名" prop="ac" style="width: 100%">
                <el-input v-model="repairForm.ac" readonly></el-input>
              </el-form-item>
              <el-form-item label="维保执行方电话" prop="ad" style="width: 100%">
                <el-input v-model="repairForm.ad" readonly></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="维保起始日期" prop="ae" style="width: 100%">
                <el-date-picker v-model="repairForm.ae" type="date" placeholder="格式：YYYY-MM-DD" readonly></el-date-picker>
              </el-form-item>
              <el-form-item label="维保起始结束" prop="af" style="width: 100%">
                <el-date-picker v-model="repairForm.af" type="date" placeholder="格式：YYYY-MM-DD" readonly></el-date-picker>
              </el-form-item>
            </div>
            <div style="padding: 0 2vw 0 0">
              <el-form-item label="描述" prop="ag" style="width: 100%">
                <el-input v-model="repairForm.ag" type="textarea" :rows="1" readonly></el-input>
              </el-form-item>
              <el-form-item label="文件资料" prop="ah" style="width: 100%">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="6" :on-exceed="handleExceed" :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <span style="font-size: 8px"> (最多上传6个文件)</span>
                </el-upload>
              </el-form-item>
              <el-form-item label="设备二维码" prop="ag" style="width: 100%">
              </el-form-item>
            </div>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="info" size="mini" @click="repairDialog = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 搜索栏 搜索图标 弹出框 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog1" title="设备列表" width="60%" @close="repairDialog1Close()">
        <div class="dialog-border pop">
          <!-- 搜索栏 -->
          <el-form label-width="80px" :model="repairForm1" ref="repairForm1Ref" :rules="repairForm1Rules" size="mini">
            <div class="row-1">
              <el-form-item label="设备编码" prop="a" style="width: 100%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="设备名称" prop="b" style="width: 100%">
                <el-input v-model="repairForm1.b"></el-input>
              </el-form-item>
              <el-form-item label="规格型号" prop="c" style="width: 100%">
                <el-input v-model="repairForm1.c"></el-input>
              </el-form-item>
              <el-form-item label="设备名称" prop="d" style="width: 100%">
                <el-select v-model="repairForm1.d" filterable>
                  <el-option label="设备类型1" value="1"></el-option>
                  <el-option label="设备类型2" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="设备区域" prop="e" style="width: 145px">
                <el-select v-model="repairForm1.e" filterable>
                  <el-option label="区域1" value="1"></el-option>
                  <el-option label="区域2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="设备系统" prop="f" style="width: 147px">
                <el-select v-model="repairForm1.f" filterable>
                  <el-option label="系统1" value="1"></el-option>
                  <el-option label="系统2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="设备部门" prop="g" style="width: 335px">
                <el-select v-model="repairForm1.g" filterable>
                  <el-option label="部门1" value="1"></el-option>
                  <el-option label="部门2AAAAAAAAAAAAAAAAAAAAAAAAA" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-button type="primary" size="mini" style="height: 30px">查询数据</el-button>
            </div>
          </el-form>
          <!-- 表格 -->
          <div class="pop-2 dialog-border-padding">
            <el-table ref="subTableRef" :data="subTable" highlight-current-row @current-change="currentSelect" style="width: 100%" :default-sort="{ prop: 'a', order: 'ascending' }" border>
              <el-table-column prop="a" label="设备编号" width="100" />
              <el-table-column prop="b" label="设备名称" />
              <el-table-column prop="c" label="规格型号" />
              <el-table-column prop="d" label="安装地址" />
              <el-table-column prop="e" label="设备类型" width="110" />
              <el-table-column prop="f" label="设备区域" />
              <el-table-column prop="g" label="设备系统" width="100" />
              <el-table-column prop="h" label="设备部门" width="100" />
            </el-table>
            <!-- 分页 -->
            <el-pagination small background layout="prev, pager, next" :total="12"></el-pagination>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog1SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog1CalcBtn()">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LButton from "../../../components/LButton.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LInput2 from "@/components/LInput2.vue";

export default {
  components: {
    Header,
    LInput,
    LButton,
    LDateTimeSelect2,
    LInput2,
  },
  data() {
    return {
      no: "",
      name: "",

      tableData1: [],
      tableData2: [
        {
          a: "购买日期",
          b: "02",
          c: "2022-02-28 16:53:06",
        },
        {
          a: "使用日期",
          b: "02",
          c: "",
        },
      ],

      repairDialog: false,
      repairForm: {},
      repairDialog1: false,
      repairForm1: {},
      subTable: [
        {
          a: "01",
          b: "大机房1#冷机",
          c: "",
          d: "主楼地下室大制冷机房",
          e: "冷水机组",
          f: "梁山县水泊商务中心",
          g: "公共设备",
          h: "主楼",
        },
        {
          a: "02",
          b: "大机房2#冷机",
          c: "",
          d: "主楼地下室大制冷机房",
          e: "冷水机组",
          f: "梁山县水泊商务中心",
          g: "公共设备",
          h: "主楼",
        },
      ],
      subTableSelect: null,
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //搜索栏“搜索图标"弹框form表单清空功能
    repairDialog1Close(row) {
      this.$refs.repairForm1Ref.resetFields(); //清空form表单
      this.$refs.subTableRef.setCurrentRow(row); //取消表格单选
    },
    //当前“设备列表”选择查询的数据
    currentSelect(val) {
      console.log("当前选择", val);
      this.subTableSelect = val;
    },
    //搜索栏“搜索图标"弹框取消按钮
    repairDialog1CalcBtn(row) {
      this.$refs.subTableRef.setCurrentRow(row); //取消表格单选
      this.repairDialog1 = false;
    },
    //搜索栏“搜索图标"弹框确定按钮
    repairDialog1SureBtn() {
      this.repairDialog1 = false;
      this.no = this.subTableSelect.a;
      this.name = this.subTableSelect.b;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

img {
  &:hover {
    cursor: pointer;
  }
}

.row-1 {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 0;
  .row-1-border {
    height: 31px;
    border: 1px solid #72aeff;
    border-radius: 5px;
    padding: 0 0 0 25px;
  }
}

.block-1 {
  display: flex;
  justify-content: space-between;

  .block-1-1 {
    display: flex;
    justify-content: space-between;

    div {
      width: 30px;
      height: 15px;
      display: inline-block;
      border-radius: 5px;

      &:last-child {
        width: 50px;
        line-height: 1;
        margin: 0 10px;
        font-size: 10px;
      }
    }
  }
}

/deep/ .el-dialog .el-select {
  width: 185px;
}

/deep/ .el-dialog .el-date-picker {
  // width: 90px;
}

/deep/ .el-pagination {
  right: 3.2vh;
}
</style>
